import React, { useState } from 'react';
import { useEffect } from 'react';
import { history } from 'umi';
import { BellOutlined, DownOutlined, PoweroffOutlined, ReloadOutlined, TeamOutlined } from '@ant-design/icons';
import { Input, Badge, Dropdown } from 'antd';

import AccountReplace from '@/components/AccountReplace';
import './index.less';
export default (props) => {
  const { dispatch } = props;
  const [userInfo, setUserInfo] = useState({});
  const [data, setData] = useState({});
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const account = JSON.parse(window.localStorage.getItem('account') || '{}');
    setUserInfo(account);
    setData(JSON.parse(window.localStorage.getItem('adminData') || '{}'));
  }, []);
  const items = [
    {
      key: '0',
      label: (
        <div
          onClick={() => {
            history.push({
              pathname: '/userModule/stageAdminList'
            })
          }}
        >
          <TeamOutlined style={{ marginRight: 12 }}></TeamOutlined>个人设置
        </div>
      ),
    },
    // {
    //   key: '3',
    //   label: (
    //     <div
    //       onClick={() => {
    //         history.push({
    //           pathname: '/userModule/stageConfiguration'
    //         })
    //       }}
    //     >
    //       <TeamOutlined style={{ marginRight: 12 }}></TeamOutlined>阶段配置
    //     </div>
    //   ),
    // },
    {
      key: '1',
      label: (
        <div
          onClick={() => {
            setVisible(true);
          }}
        >
          <ReloadOutlined style={{ marginRight: 12 }}></ReloadOutlined>修改密码
        </div>
      ),
    },
    {
      key: '2',
      label: (
        <div
          onClick={() => {
            dispatch({ type: 'login/fakeLoginOut' });
          }}
        >
          <PoweroffOutlined style={{ marginRight: 12 }}></PoweroffOutlined>退出登录
        </div>
      ),
    },
  ];
  const { profile, username } = userInfo;
  const { organizationName, roleName, version } = data;
  return (
    <div>
      <div className='TopBar_height'></div>
      <div className="TopBar_box">
        <div className="TopBar_content">
          <div className="TopBar_content_left">
            <div className="TopBar_content_title">{organizationName}</div>
            <div className="TopBar_content_tabs">{version}</div>
            {/* <div className="TopBar_content_userTag">{roleName}</div> */}
          </div>
          <div className="TopBar_content_right">
            {/* <Input className="TopBar_content_input" placeholder="搜索" />
          <Badge count={12}>
            <BellOutlined className="TopBar_icon_size" size={36}></BellOutlined>
          </Badge> */}
            {/* &nbsp; &nbsp; &nbsp;{'|'} &nbsp; &nbsp; */}
            <Dropdown
              menu={{
                items,
              }}
            >
              <div className="TopBar-flex">
                <div className="TopBar-info__img">
                  <img className="avatar" src={profile} />
                </div>
                <div className="TopBar-info">{username}</div>
                <DownOutlined />
              </div>
            </Dropdown>
          </div>
        </div>
        <AccountReplace
          width={500}
          show={visible}
          onClose={() => setVisible(false)}
        ></AccountReplace>
      </div>
    </div>

  );
};
